<template>
	<view class="container">
		<!-- 内容主体区域 -->
		<view class="main-content">
			<view class="badge-dot"></view>
			<view class="badge-dot orange"></view>
			<view class="badge-dot green"></view>
			<view class="badge-dot cyan"></view>
			<view class="badge-dot blue"></view>
			<view class="badge-dot black"></view>
			<view class="badge-dot gray"></view>
			<view class="field-title">
				<text>资料修改</text>
			</view>
			<form @submit="onSubmit">
				<view class="form-item">
					<view class="upload-btn" @click="uploadImage">
						<text class="iconfont icon-upload"></text>
						<text>单图片上传</text>
					</view>
					<view v-if="uploadedImage" class="upload-preview">
						<image :src="uploadedImage" mode="aspectFill" class="upload-img"></image>
					</view>
				</view>
				<view class="form-item">
					<label>用户编号</label>
					<input type="text" v-model="userId" disabled />
				</view>
				<view class="form-item">
					<label>姓名</label>
					<input type="text" v-model="userName" :class="{ 'error': nameError }" />
					<view v-if="nameError" class="error-tip">{{ nameError }}</view>
				</view>
				<view class="form-item">
					<label>性别</label>
					<view class="radio-group">
						<label class="radio-item" v-for="(item, index) in genderOptions" :key="index">
							<input type="radio" :value="item.value" v-model="userGender" />
							<text>{{ item.label }}</text>
						</label>
					</view>
				</view>
				<view class="form-item">
					<label>年龄</label>
					<input type="text" v-model="userAge" :class="{ 'error': ageError }" />
					<view v-if="ageError" class="error-tip">{{ ageError }}</view>
				</view>
				<view class="form-item">
					<label>星座</label>
					<input type="text" v-model="userStar" :class="{ 'error': starError }" />
					<view v-if="starError" class="error-tip">{{ starError }}</view>
				</view>
				<view class="form-item">
					<label>学校</label>
					<view class="school-input" @click="showSchoolDropdown = true">
						<input v-model="userSchool" placeholder="南昌大学" @input="filterSchoolOptions" />
						<view class="dropdown" v-show="showSchoolDropdown" @click.stop>
							<view class="dropdown-item" v-for="(item, index) in filteredSchoolOptions" :key="index"
								@click="selectSchool(item)">
								{{ item }}
							</view>
						</view>
					</view>
					<view v-if="schoolError" class="error-tip">{{ schoolError }}</view>
				</view>
				<view class="form-item">
					<label>专业</label>
					<input type="text" v-model="userProf" :class="{ 'error': profError }" />
					<view v-if="profError" class="error-tip">{{ profError }}</view>
				</view>
				<view class="form-item">
					<label>自我介绍</label>
					<textarea v-model="userIntro" :class="{ 'error': introError }"></textarea>
					<view v-if="introError" class="error-tip">{{ introError }}</view>
				</view>
				<view class="form-item">
					<button type="primary" @click="saveChanges">保存</button>
				</view>
			</form>
		</view>

		<!-- 底部区域 -->
		<view class="footer">
			<text>© - 联系校事达官方客服：6666666</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	//import uniUploader from '@dcloudio/uni-uploader';

	// 头部相关数据
	const logoSrc = '/static/xsd.png';
	const userImgSrc = '/static/images/user01.jpg';
	const username = '小灰';

	// 侧边栏菜单显示状态
	const subMenus = ref({
		home: false,
		task: false,
		profile: false,
		chat: false,
		friends: false
	});

	// 用户信息
	const userId = ref('1');
	const userName = ref('小灰');
	const userGender = ref('0');
	const userAge = ref('24');
	const userStar = ref('金牛座');
	const userSchool = ref('南昌大学');
	const userProf = ref('软件工程');
	const userIntro = ref('我是一个具有2年工作经验的Java软件工程师。');

	// 表单验证错误信息
	const nameError = ref('');
	const ageError = ref('');
	const starError = ref('');
	const schoolError = ref('');
	const profError = ref('');
	const introError = ref('');

	// 按钮禁用状态
	const isDisabled = computed(() => {
		return nameError.value || ageError.value || starError.value || schoolError.value || profError.value ||
			introError.value;
	});

	
	// 性别选项
	const genderOptions = [
	  { value: '0', label: '男' },
	  { value: '1', label: '女' }
	];
	// 学校选项
	const schoolOptions = ['中南大学', '湖南大学', '长沙大学'];
	const showSchoolDropdown = ref(false);
	const filteredSchoolOptions = computed(() => {
		return schoolOptions.filter(item => item.includes(userSchool.value));
	});

	// 上传的图片
	const uploadedImage = ref('');

	// 切换侧边栏子菜单
	const toggleSubMenu = (menuKey) => {
		subMenus.value[menuKey] = !subMenus.value[menuKey];
	};

	// 显示私聊
	const showPrivate = (value) => {
		uni.navigateTo({
			url: `/pages/userTalk/userTalk?username=${value}`
		});
	};

	// 表单提交
	const onSubmit = (e) => {
		e.preventDefault();
		saveChanges();
	};

	// 保存修改
	const saveChanges = () => {
		let isValid = true;
		if (userName.value.length < 1) {
			nameError.value = '姓名至少得1个字符啊';
			isValid = false;
		} else {
			nameError.value = '';
		}
		if (isNaN(userAge.value) || userAge.value <= 0) {
			ageError.value = '请输入有效的年龄';
			isValid = false;
		} else {
			ageError.value = '';
		}
		if (userStar.value.length < 1) {
			starError.value = '请输入星座信息';
			isValid = false;
		} else {
			starError.value = '';
		}
		if (userSchool.value.length < 1) {
			schoolError.value = '请选择学校';
			isValid = false;
		} else {
			schoolError.value = '';
		}
		if (userProf.value.length < 1) {
			profError.value = '请输入专业信息';
			isValid = false;
		} else {
			profError.value = '';
		}
		if (userIntro.value.length < 1) {
			introError.value = '请输入自我介绍';
			isValid = false;
		} else {
			introError.value = '';
		}
		if (isValid) {
			// 这里可以添加保存到后端的逻辑，例如使用uni.request
			console.log('保存成功', {
				userId: userId.value,
				userName: userName.value,
				userGender: userGender.value,
				userAge: userAge.value,
				userStar: userStar.value,
				userSchool: userSchool.value,
				userProf: userProf.value,
				userIntro: userIntro.value
			});
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}
	};

	// 上传图片
	const uploadImage = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				const tempFilePaths = res.tempFilePaths;
				uploadedImage.value = tempFilePaths[0];
				// 这里可以添加上传到服务器的逻辑，例如使用uniUploader
			}
		});
	};

	// 选择学校
	const selectSchool = (item) => {
		userSchool.value = item;
		showSchoolDropdown.value = false;
	};

	// 过滤学校选项
	const filterSchoolOptions = () => {
		if (userSchool.value === '') {
			showSchoolDropdown.value = false;
		} else {
			showSchoolDropdown.value = true;
		}
	};
</script>

<style scoped>
	/* 全局样式 */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	/* 头部样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.logo {
		width: 100px;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}

	.nav-left navigator,
	.nav-right navigator {
		margin: 0 10px;
		color: #333;
		text-decoration: none;
	}

	.user-dropdown {
		position: relative;
		cursor: pointer;
	}

	.user-img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #fff;
		min-width: 120px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.user-dropdown:hover.dropdown-content,
	.dropdown-content.active {
		display: block;
	}

	.dropdown-content navigator {
		display: block;
		padding: 10px;
		color: #333;
		text-decoration: none;
	}

	/* 侧边栏样式 */
	.sidebar {
		width: 200px;
		background-color: #333;
		color: #fff;
	}

	.sidebar-scroll {
		overflow-y: auto;
		max-height: calc(100vh - 60px);
	}

	.nav-item {
		padding: 10px 20px;
		cursor: pointer;
	}

	.sub-menu {
		display: none;
		padding-left: 20px;
	}

	.nav-item.active.sub-menu {
		display: block;
	}

	/* 内容主体样式 */
	.main-content {
		flex: 1;
		padding: 20px;
	}

	.title-section {
		margin-bottom: 20px;
	}

	.badge-dot {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.badge-dot.orange {
		background-color: orange;
	}

	.badge-dot.green {
		background-color: green;
	}

	.badge-dot.cyan {
		background-color: cyan;
	}

	.badge-dot.blue {
		background-color: blue;
	}

	.badge-dot.black {
		background-color: black;
	}

	.badge-dot.gray {
		background-color: gray;
	}

	.field-title {
		margin-top: 10px;
		margin-bottom: 30px;
		font-weight: bold;
	}

	.form-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 20px;
	}

	.form-item label {
		width: 100px;
		margin-right: 10px;
	}

	.form-item input,
	.form-item textarea {
		width: 200px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}

	.form-item input.error,
	.form-item textarea.error {
		border-color: red;
	}

	.error-tip {
		color: red;
		font-size: 12px;
	}

	.upload-btn {
		display: flex;
		align-items: center;
		background-color: #007aff;
		color: #fff;
		padding: 6px 10px;
		border-radius: 3px;
		cursor: pointer;
	}

	.upload-btn text {
		margin-right: 5px;
	}

	.upload-preview {
		width: 132px;
		height: 92px;
		margin-top: 10px;
	}

	.upload-img {
		width: 100%;
		height: 100%;
	}

	.radio-group {
		display: flex;
	}

	.radio-item {
		margin-right: 10px;
	}

	.school-input {
		position: relative;
	}

	.dropdown {
		position: absolute;
		top: 30px;
		left: 0;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 3px;
	}

	/* 底部样式 */
	.footer {
		text-align: center;
		padding: 20px;
		background-color: #f8f8f8;
	}
</style>

<style scoped>
.form-container {
  padding: 20px;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.form-item label {
  width: 80px;
  margin-right: 10px;
}
.radio-group {
  display: flex;
}
.radio-item {
  margin-right: 10px;
}
.radio-item input[type="radio"] {
  transform: scale(1.2); /* 调整单选框大小 */
  margin-right: 5px;
}
</style>